<script setup lang="ts">
import {onUnmounted, onMounted, ref} from "vue";
import {useRoute,useRouter} from "vue-router";
import {
   prodinfo,
  getprodcolorinfo
} from "@/axios/api.js"
const  route = useRoute()
const  router = useRouter()
let prodinfoVal = ref([])
let layout = ref(" prev, next")
let pagerCount = ref(0)
let colorList = ref([])
let color = ref('')
let name = ref("")
let froms = ref({
  page:1,
  pagesize:2,
  pid:"",
  total:1
})
color.value = route.query.title
froms.value.pid = route.query.id;
name.value = route.query.name;
const getprodcolorinfos = () => {
  prodinfo(froms.value).then((res: any) => {
    froms.value.total = res.data.data.total
    prodinfoVal.value = [...prodinfoVal.value,...res.data.data.data]
    pagerCount.value= res.data.data.last_page
  })
}
//分页
const handleCurrentChange = (val: number) => {
  froms.value.page = val
  getprodcolorinfos()
}
//返回
const handleTo = (item:any) => {
  let fullUrl = window.location.origin;
  router.push({path:"/stone",query:{id:item.id,name:item.category_name}})
}
//颜色
const getprodcolorinfoss = () => {
  getprodcolorinfo().then((res: any) => {
    colorList.value = res.data.list
  })
}
const checkIfBottom = () => {
  const scrollPosition = window.scrollY + window.innerHeight;
  const pageHeight = document.documentElement.scrollHeight;
  if(scrollPosition >= pageHeight){
    if(froms.value.page<pagerCount.value){
      froms.value.page += 1
      getprodcolorinfos()
    }
  }
  // isBottom.value = scrollPosition >= pageHeight;
};
getprodcolorinfoss()
getprodcolorinfos()
onMounted(() => {
  window.addEventListener('scroll', checkIfBottom);
});

onUnmounted(() => {
  window.removeEventListener('scroll', checkIfBottom);
});
</script>

<template>
<div>
  <div class="exhibition">
    <div class="exhibition-tltle Color_ffffff Flex Flex_A_C Flex_J_Sb">
      <div class="exhibition-tltle-l">
        <div class="Font_size28 fontFamilyR Color_ffffff07">
          <span>Luxury stone series</span>
        </div>
        <div class="Font_size28 fontFamilyR">
          <span>{{ name }}</span>
        </div>
      </div>
      <div class="exhibition-tltle-r  Flex">
        <div class="exhibition-tltle-r-item  Font_size17"
             :class="color==a.category_name?'Color_DE0E35':''"
             @click="handleTo(a)"
             v-for="(a) in colorList" :key="a.id">
          <div class="Hover_scale">
            <span>{{ a.category_name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="exhibition-center Color_ffffff Flex  Flex_J_Sb Flex_W_W">
      <div class="exhibition-center-item Margin_T120 Hover_scale" v-for="(a) in prodinfoVal" :key="a.id">
        <div class="item-img">
          <img :src="a.image" alt="">
        </div>
        <div class="Flex Margin_T80">
          <div class="item-title fontWeight100 Font_size32">
            <span>
              名称：{{ a.title }}
            </span>
          </div>
          <div class="item-text fontWeight100 Font_size32">
            <span>
              适用：{{a.summary}}
            </span>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="fenye">-->
<!--      <el-pagination-->
<!--          v-model:current-page="froms.page"-->
<!--          v-model:page-size="froms.pagesize"-->
<!--          :background="true"-->
<!--          size="large"-->
<!--          :layout="layout"-->
<!--          :total="froms.total"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->
<!--    </div>-->
  </div>
</div>
</template>

<style scoped>
.fenye{
  display: flex;
  justify-content: right;
  margin-top: 60px;
}
.exhibition {
  padding: 106px 163px;
  background-color: RGBA(35, 37, 40, 1);
  background-image: url("@/assets/img/stone.png");
  background-size: 100% 890px;
  background-repeat: no-repeat;

  .exhibition-center-item {
    position: relative;
    .item-img{
      width: 1501px;
      height: 936px;
    }
    .item-title{
      width: 300px;
    }
    .item-text{
      width: 1100px;
    }
  }

  .exhibition-tltle-r-item {
    padding: 0 25px;
    border-right: 1px solid RGBA(139, 140, 141, 1);
    position: relative;
    z-index: 1100;

    &:last-child {
      border-right: none;
    }
  }
}
</style>